<template>
  <div>
    <div class="container">
      <div class="box_title">热门企业</div>
      <div class="hot_company">
        <ul class="cur">
          <li v-for="(item,index) of lists" :key="index" class="sub_li">
            <div class="img_box">
              <img :src="item.img" alt="">
            </div>
            <div class="company_title">
              <h4>{{item.title}}</h4>
            </div>
            <div class="company_text">
              已上市
              <span>｜</span>
              在线教育
            </div>
            <a href="" class="btn">
              <p>
                <span>2407</span>
                个热招职位
              </p>
            </a>
          </li>
        </ul>
      </div>
      <div class="button_more" @click="Add_more">查看更多</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HotComp',
  data () {
    return {
      lists: [{
        title: '北京尚德机构',
        img: 'https://img.bosszhipin.com/beijin/mcs/bar/20200402/ad9cb5b320b06407da363ac95e09f985be1bd4a3bd2a63f070bdbdada9aad826.png?x-oss-process=image/resize,w_100,limit_0',
        company_title: '',
        company_text: ''
      }, 2, 3, 4, 5, 6, 7, 8]
    }
  },
  methods: {
    Add_more () {
      const arr = [
        {},
        {},
        {},
        {}
      ]
      arr.forEach((value, index) => {
        this.lists.push(value)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box_title {
  position: relative;
  text-align: center;
  padding: 20px 0;
  font-size: 24px;
  color: #414a60;

  &::after {
    content: '';
    position: absolute;
    top: 49%;
    right: 493px;
    display: inline-block;
    width: 50px;
    height: 1px;
    background-color: #d1d4db;
  }

  &::before {
    content: '';
    position: absolute;
    left: 490px;
    top: 49%;
    display: inline-block;
    width: 50px;
    height: 1px;
    background-color: #d1d4db;
  }
}

.hot_company {

  .cur {
    display: flex;
    flex-wrap: wrap;

    .sub_li {
      width: 284px;
      height: auto;
      background-color: #ffffff;
      margin: 0 16px 16px 0;
      transition: .3s linear;

      &:hover {
        box-shadow: 0 1px 5px rgba(82, 202, 195, 0.2);
        .company_title{
          color: #00d7c6;
        }
      }

      .img_box {
        margin: 30px 0 14px 0;
        text-align: center;

        img {
          width: 58px;
          height: 58px;
          border: 1px solid #f3f5fb;
          border-radius: 9px;
        }
      }

      .company_title {
        text-align: center;
        margin-bottom: 10px;
        height: 22px;
        text-overflow: ellipsis;
        color: #414a60;
        font-weight: 400;
      }

      .company_text {
        font-size: 12px;
        color: #898e9d;
        height: 18px;
        line-height: 18px;
        text-align: center;
        margin-bottom: 11px;
      }

      .btn {
        display: block;
        border: 1px solid #e5e9ee;
        width: 180px;
        height: 34px;
        margin: 0 auto;
        text-align: center;
        font-size: 12px;
        margin-bottom: 20px;
        transition: .3s linear;

        &:hover {
          border: 1px solid #00d7c6;
        }

        span {
          color: #00d7c6;
        }

        p {
          line-height: 34px;
          color: #61687c;
        }
      }
    }
  }
}

.button_more {
  width: 382px;
  height: 32px;
  /*background-color: #f6f6ec;*/
  text-align: center;
  line-height: 32px;
  color: #00c2b3;
  margin: 0 auto;
  border: 1px #5dd5c8 solid;
  transition: .2s linear;

  &:hover {
    background-color: #00c2b3;
    color: #ffffff;
    cursor: pointer;
  }
}
</style>
